:root {
  /* ===== 主色调 - 浅绿色系，用于按钮、链接、标题等主要交互元素 ===== */
  --primary-color: #67c23a;         /* 主绿色：主题色的基础色 */
  --primary-color-hover: #85ce50;   /* 浅绿色 Hover 状态：鼠标悬停时按钮等颜色 */
  --primary-color-active: #5daf34;  /* 深绿色 Active 状态：点击或按下时颜色 */

  /* ===== 文字颜色 ===== */
  --text-color-primary: #303133;      /* 主要文字颜色，深灰，适合正文和标题 */
  --text-color-secondary: #606266;    /* 次要文字颜色，浅灰，用于辅助说明 */
  --text-color-placeholder: #a6a6a6;  /* 输入框占位符文字颜色，淡灰色，不抢眼 */

  /* ===== 背景色 ===== */
  --bg-color-base: #ffffff;         /* 基础背景色，纯白 */
  --bg-color-light: #f0f9eb;       /* 浅绿色背景，适合卡片、表单背景 */
  --bg-color-lighter: #f5f9f0;     /* 更浅背景色，用作页面底色或更微妙分层 */

  /* ===== 边框色 ===== */
  --border-color-base: #d3e4c7;    /* 边框基础颜色，浅绿灰，用于输入框和按钮边框 */
  --border-color-light: #e6f0d9;   /* 更浅边框色，细分割线或阴影边界 */

  /* ===== 阴影 ===== */
  --shadow-base: rgba(103, 194, 58, 0.2);  /* 主色调半透明阴影，轻微立体感 */

  --el-color-primary: #67c23a;
  --el-color-primary-light-3: #85ce50;
  --el-color-primary-light-5: #a1d67a;
  --el-color-primary-light-7: #c7e5b3;
  --el-color-primary-light-8: #def0d0;
  --el-color-primary-light-9: #edf8e7;
  --el-color-primary-dark-2: #5daf34;

  /* 成功色 */
  --el-color-success: #67c23a;
  --el-color-success-light-3: #94d475;
  --el-color-success-light-5: #b3e197;
  --el-color-success-light-7: #d1f0b9;

  /* 警告色 */
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #f0c26b;
  --el-color-warning-light-5: #f7d694;
  --el-color-warning-light-7: #fae5b7;

  /* 危险色 */
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f99f9f;
  --el-color-danger-light-5: #fcb7b7;
  --el-color-danger-light-7: #fccccc;

  /* 信息色 */
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c9cbcf;
  --el-color-info-light-7: #dedfe1;

}
